<template>
  <div class="course-intro">
    <div class="header">
     
      <div class="kuang">
        <h1>{{ courseName }}</h1>
        <ul class="info">
          <li> <div>章节</div>     <div>{{ chapters }}</div> </li>
          <li> <div>视频</div>     <div>{{ videos }}</div> </li>
          <li> <div>课件</div>     <div>{{ courseware }}</div> </li>
          <li> <div>学习人数</div> <div>{{ studentCount }}</div> </li> 
        </ul>
      </div> 
    </div>
    
    <div class="bg">
      <div class="time">
        <li><span class="span1">开课时间:</span><span>{{ startTime }}</span></li>
        <li><span class="span1">结课时间:</span><span>{{ endTime }}</span></li>
      </div>
      
      <div class="container">
        <div class="content">
          <div class="kcjs">
            <h2 class="section-title">课程介绍</h2>
            <hr class="section-line">
            <p>{{ introduction }}</p>
            <img :src="introImage" alt="Course Intro Image">
          </div>
        </div>
      
        <div class="sidebar">
          <div class="kcgg">
            <h2 class="section-title">课程公告</h2>
            <hr class="section-line">
            <p>{{ noticeTitle }}</p>
            <p>{{ noticeContent }}</p>
          </div>
          
          <div class="jxtd">
            <h3 class="section-title">教学团队</h3>
            <hr class="section-line">
            <ul class="team">
              <!-- 使用 v-for 指令循环渲染技术列表数据 -->
               <li v-for="teacher in teachers" :key="teacher.username">
                <img :src="teacher.avatar" alt="教师头像" width="60" height="60">
                <div class="identity">
                {{ teacher.username }}
              </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'CourseIntro',
  data() {
    return {
      courseName: '',
      chapters: '',
      examPoints: '',
      keyCards: '',
      videos: '',
      courseware: '',
      experience: '',
      studentCount: '',
      introduction: '',
      introImage: '',
      noticeTitle: '',
      noticeContent: '',
      startTime: '',
      endTime: '',
      teachers: [],
      semesterIds:0,
      showModal: false
    };
  },
 
  mounted() {
   // 获取路由中的查询参数 semesterIds
  this.semesterIds = this.$route.query.semesterIds;  // 使用正确的属性名
  console.log('Semester IDs:', this.semesterIds); // 输出到控制台，检查参数是否正确获取到
  this.introId = this.$route.params.id; // 获取路由参数 introId
  console.log('id:', this.id); // 输出到控制台，检查参数是否正确获取到
  // 调用获取课程数据的方法，可以根据需要命名为 fetchCourseData
  this.fetchCourseData();
  },
  methods: {
    async fetchCourseData() {      
      try {
          // const course_id = localStorage.getItem("course_id");
          // const semester_id = localStorage.getItem("semester_id");
           // 同时发起两个请求
          const [teachersResponse, courseInfoResponse] = await Promise.all([
          axios.get('http://8.138.12.59:1999/teacher/showteam', {
            params: {
              // course_id: course_id,  
              course_id: 1,         
            }
          }),
          axios.get('http://8.138.12.59:1999/semesters/showbase', {
            params: {
              // semester_id: semester_id, 
              semester_id: 1,             
            }
          })
        ]);
        const teachersData = teachersResponse.data.data;
        const courseInfoData = courseInfoResponse.data.data;
        teachersData.forEach(teachersData => {
  // 将接口返回的数据转换为需要的格式
  const teacher = {
    id: teachersData.id, 
    username: teachersData.username,
    avatar: teachersData.img_url
  };
  // 将课程对象添加到 courses 数组中
  this.teachers.push(teacher);
});
        this.courseName = courseInfoData.semester_name;
        this.chapters = courseInfoData.unit_cnt;
        this.videos = courseInfoData.video_cnt; 
        this.courseware=courseInfoData.ppt_cnt;
        this.studentCount=courseInfoData.stu_cnt;
        this.introduction = courseInfoData.semester_intro;
        this.startTime = courseInfoData.start_time;
        this.endTime = courseInfoData.end_time;
        this.introImage = courseInfoData.resource_url;
        this.noticeTitle = courseInfoData.notice_title;
        this.noticeContent=courseInfoData.notice_content;   
      }  catch (error) {
    console.error('Error fetching course data:', error);
    if (error.response) {
      console.error('Response status:', error.response.status);
      console.error('Response data:', error.response.data);
    } else {
      console.error('Error details:', error.message);
    }
  }
    },
  }
};
</script>
<style scoped>

.course-intro {
  display: flex;
  flex-direction: column;
}
.header {
  text-align: left;
  padding-left: 80px;
  height:140px;
  background-size: cover; /* 背景图尺寸适应容器 */
  background-image: url('@/assets/course_intro_bg.png');
  color:white;
  margin: 0 150px 0 150px;
}

.kuang{
   width: 600px;
   
}

.info {
  list-style: none;
  display: flex;
  max-width: 500px;
  padding: 0;
  margin: 0px; 
  /* justify-content: space-around; */
}
.info li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;  margin-right: 30px; /*间距值 */
  color:white;
}
.bg{
  background-color: #f9f9f9;
  margin: 0 150px 0 150px;
}



/* 开课时间结课时间 */
.time {
  list-style: none;
  display: flex;
  text-align: center;
  margin-top:3px;
  padding-left: 80px;
  background-color: rgb(244, 241, 241);
  height:36px;
}
.time li {
  display: flex;
  align-items: center;
  text-align: center;
  padding-right: 30px;
}

.time li span {
  padding-right:6px;
}

.span1 {
  color: rgb(93, 92, 92);
}


.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 在大屏幕上内容水平居中 */
  width: 1000px;
  margin-right: auto;
  margin-left: auto;
  min-height: 100vh; 
}

.content {
  flex: 1 1 auto; 
  max-width: calc(70% - 20px); 
  margin-right: 20px; 
}

.sidebar {
  flex: 1 1 auto; 
  max-width: 30%; 
}
.section-title {
  font-size: 25px; 
  font-weight: bold; /* 标题加粗 */
  text-align: center; /* 标题居中 */
  margin-bottom: 10px; /* 标题与内容之间的间距 */
}
.section-line {
  border-top: 1px solid #ccc; /* 分隔线样式 */
  margin: 10px 0; /* 分隔线与内容之间的间距 */
}
.kcjs{
 
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  border: 2px solid rgb(243, 241, 241); 
}
.kcgg{
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  border: 2px solid rgb(243, 241, 241); 
}

.jxtd{
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  margin-top: 20px;
  border: 2px solid rgb(243, 241, 241); 
}


.kcjs img {
  max-width: 100%; 
  height: auto; 
  margin: 0 auto; /* 图片水平居中 */
 
}

.team {
  list-style: none;
  display: flex;
  padding: 0;
  justify-content: center;
 
}
.team li {
  margin-bottom: 10px;
  align-items: center;
  margin-right: 10px;
}
.team li img {
  border-radius: 50%; /* 圆形头像 */
}

h2 {
    border-bottom: none !important; /* 这里修改为 none */
}
</style>
